<template>
	<!-- 
    走进蓝月亮
  关于我们
   -->
	<div class="wrap">
		<!-- 标题 -->
		<div class="title">
			<p>关于我们</p>
		</div>
		<!-- 品牌介绍 -->
		<div class="introduce con">
			<div class="introduce_top flex">
				<div class="left">
					<p class="tit">品牌介绍</p>
					<p>
						蓝月亮品牌诞生于1992年，是以消费者为核心、以创新为驱动力的家庭清洁解决方案提供商。2020年，蓝月亮集团控股有限公司在香港联合交易所主板成功上市，股份代号6993。
					</p>
					<p>
						根据中国商业联合会、中华全国商业信息中心统计数据，蓝月亮洗衣液连续12年（2009-2020）、洗手液连续9年（2012-2020）行业市场综合占有率第一；根据Chnbrand发布的中国品牌力指数品牌排名和分析报告，蓝月亮洗衣液、洗手液品牌力指数连续11年（2011-2021）第一。
					</p>
					<p>
						秉承“一心一意做洗涤”的宗旨，蓝月亮坚持科技创新，推动了中国洗涤行业实现“洗衣粉”转“洗衣液”和“普通型洗衣液”转“浓缩型洗衣液”的两次跨越式升级。2008年，蓝月亮率先向全国推广洗衣液，打破十几亿中国人的洗衣习惯，开创中国洗衣“液”时代；2015年，蓝月亮突破技术难关，推出国内首款采用泵头计量式包装「浓缩+」洗衣液机洗至尊，再一次掀起中国洗涤市场变革。
					</p>
					<p>
						未来，蓝月亮将继续致力于为广大消费者提供优质的产品、极致的服务和专业的咨询，让每个家庭都能收获洁净、健康、舒适、体面与快乐。
					</p>
				</div>
				<div class="right">
					<img src="./img/AboutUs/aboutus (5).jpg" />
				</div>
			</div>
			<div class="introduce_bottom">
				<p>
					数据来源: <br />
					1、根据中国商业联合会、中华全国商业信息中心对全国各省市区（海南、西藏及港澳台地区除外）年销售额在亿元以上、具有代表意义的典型大型零售商业集团企业的市场销售调查统计：蓝月亮洗衣液连续12年（2009—2020）荣列同类产品市场综合占有率第一位，蓝月亮洗手液连续9年（2012—2020）荣列同类产品市场综合占有率第一位；<br />
					2、根据Chnbrand发布的2021年（第十一届）中国品牌力指数{C-BPI}品牌排名和分析报告，蓝月亮洗衣液、洗手液品牌力指数连续11年（2011-2021）第一。
				</p>
			</div>
		</div>
		<!-- 品牌历程 -->
		<div class="course con">
			<p>品牌历程</p>
			<div class="course_top">
				<img src="./img/AboutUs/year.png" />
			</div>
			<div class="course_bottom">
				<div class="course_item flex">
					<div class="left">
						<img src="./img/AboutUs/aboutus (1).jpg" />
					</div>
					<div class="right">
						<h3>2021年</h3>
						<p>
							中国市场商品销售结果发布：蓝月亮洗衣液连续12年、洗手液连续9年市场综合占有率第一。
						</p>
					</div>
				</div>
				<div class="course_item flex">
					<div class="right">
						<h3>2021年</h3>
						<p>
							中国市场商品销售结果发布：蓝月亮洗衣液连续12年、洗手液连续9年市场综合占有率第一。
						</p>
					</div>
					<div class="left">
						<img src="./img/AboutUs/aboutus (1).png" />
					</div>
				</div>
				<div class="course_item flex">
					<div class="left">
						<img src="./img/AboutUs/aboutus (2).jpg" />
					</div>
					<div class="right">
						<h3>2021年</h3>
						<p>荣获第十届中国公益节“2020年度责任品牌奖”。</p>
					</div>
				</div>
			</div>
		</div>
		<!-- 清洁方案 -->
		<div class="clean con">
			<img src="./img/AboutUs/aboutus (3).jpg" />
			<p>
				结合消费者的家居生活场景，蓝月亮为消费者提供全套家居清洁方案，包括衣物机洗、衣物手洗、宝宝衣物清洗、衣物去色渍、衣物柔顺、餐具和蔬果清洗、油烟机清洁、手部清洁、马桶清洁等。
			</p>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {}
	},
	methods: {},
}
</script>

<style lang="scss" scoped>
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
ul > li {
	list-style: none;
}
.flex {
	display: flex;
}
.con {
	width: 86%;
	margin: 0 auto;
	margin-bottom: 100px;
}
.wrap {
	width: 100%;
	font-size: 15px;
	// 标题
	.title {
		width: 100%;
		height: 445px;
		background: url('./img/AboutUs/aboutus (4).jpg') no-repeat;
		background-size: 100%;
		& > img {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
		& > p {
			position: absolute;
			right: 0;
			left: 0;
			top: 200px;
			// transform: translateY(200px);
			text-align: center;
			color: #fff;
			margin: auto;
			line-height: 0.41rem;
			font-weight: 700;
			text-shadow: 0 2px 12px rgb(0 0 0 / 32%);
			font-size: 26px;
			z-index: 10;
			&::before {
				content: '';
				position: absolute;
				top: 5px;
				left: 680px;
				width: 40px;
				height: 1px;
				background: #fff;
			}
			&::after {
				content: '';
				position: absolute;
				top: 5px;
				right: 680px;
				width: 40px;
				height: 1px;
				background: #fff;
			}
		}
	}
	//品牌介绍
	.introduce {
		margin-top: 50px;
		.introduce_top {
			width: 100%;
			justify-content: space-between;
			.left {
				width: 48%;
				& > p {
					width: 100%;
					margin-bottom: 20px;
					color: #333;
					line-height: 35px;
				}
				.tit {
					color: #1d3e97;
					font-weight: 500;
					font-size: 50px;
				}
			}
			.right {
				width: 48%;
				img {
					width: 100%;
				}
			}
		}
		.introduce_bottom {
			width: 100%;
			margin-bottom: 20px;
			& > p {
				color: #333;
				line-height: 35px;
			}
		}
	}
	//品牌历程
	.course {
		margin-top: 100px;
		& > p {
			color: #1d3e97;
			font-weight: 500;
			font-size: 50px;
			margin-bottom: 50px;
		}
		.course_top {
			width: 100%;
			margin-bottom: 50px;
			& > img {
				width: 100%;
			}
		}
		.course_bottom {
			width: 100%;
			.course_item {
				width: 100%;
				justify-content: space-between;
				margin-bottom: 40px;
				.left {
					width: 48%;
					& > img {
						width: 100%;
					}
				}
				.right {
					width: 48%;
					color: #333;
					h3 {
						margin-top: 15px;
						margin-bottom: 50px;
						font-size: 22px;
					}
				}
			}
		}
	}
	//清洁方案
	.clean {
		& > img {
			width: 100%;
		}
		p {
			color: #333;
			margin: 20px;
		}
	}
}
</style>